'use strict';
import React from "react";
import {
    StyleSheet,
    Text,
    TextInput,
    TouchableOpacity,
    View
} from "react-native";
import Container from "../../component/common/Container";
import NavigationBar from "../../component/navigation/NavigationBar";
import ImageView from "../../component/common/ImageView";
import Button from "../../component/common/Button";
import {KeyboardAwareScrollView} from "react-native-keyboard-aware-scroll-view";
import {inject, observer} from "mobx-react";
import ImagePickerManager from "../../config/manager/ImagePickerManager";
import {HorizontalLine} from "../../component/common/CommonLine";

@inject('loginStore')
@observer
class EditInfo extends React.Component {

    constructor(props) {
        super(props);
        const {loginStore} = this.props;
        const userInfo = loginStore.getUserInfo;
        this.state = {headImg: userInfo.user_img};
        this.inputData = {name: userInfo.user_nickname, sign: userInfo.user_remark};
    }

    _onPressSelectImage = async () => {
        const result = await ImagePickerManager.showMultipleImagePicker({imageCount: 1});
        // console.log('选择头像返回',result);
        if (result.code === StatusCode.SUCCESS_CODE) {
            // console.log('拿到头像成功!');
            const upData = await Services.uploadQiNiu(result.data);
            // console.log('上传七牛返回',upData);
            if (upData.code === StatusCode.SUCCESS_CODE) {
                // console.log('七牛上传头像成功----------');
                // loginStore.updateUserInfo('user_img',`${ServicesApi.API}/${upData.data}`);
                this.setState({headImg: `${ServicesApi.QI_NIU_LINK}${upData.data[0].key}`});
                // console.log(this.state.headImg);
            } else {
                ToastManager.show('上传头像失败');
                // console.log('上传头像失败');
            }
        }
    };

    _onPressSave = async () => {
        const {loginStore} = this.props;
        const data = {
            user_id: global.secretKey,
            user_phone: loginStore.getUserInfo.user_phone,
            user_img: this.state.headImg,
            user_nickname: this.inputData['name'],
            user_remark: this.inputData['sign']
        };
        const result = await Services.post(ServicesApi.EDIT_USER_INFO, data);
        if (result.code === StatusCode.SUCCESS_CODE) {
            //刷新用户数据
            await loginStore.getUserData(global.secretKey);
            ToastManager.show('更改资料成功!');
            RouterHelper.goBack();
        } else {
            ToastManager.show(result.dec || 'error');
        }
    };

    _onChangeText = (text, type) => {
        this.inputData[type] = text;
    };

    render() {
        const {params} = this.props.navigation.state;
        const pageTitle = params.pageTitle || '个人资料修改';
        return (
            <Container>
                <NavigationBar
                    title={pageTitle}
                />
                <KeyboardAwareScrollView
                    style={styles.scroll}
                    keyboardShouldPersistTaps={'handled'}
                >
                    <View style={styles.rowView}>
                        <Text style={styles.title}>头像</Text>
                        <TouchableOpacity onPress={this._onPressSelectImage}>
                            <ImageView
                                resizeMode={'cover'}
                                style={styles.headImg}
                                source={this.state.headImg ? {uri: this.state.headImg} : Images.icon_default_avatar}
                            />
                        </TouchableOpacity>
                    </View>
                    <HorizontalLine style={styles.horLine}/>
                    <View style={styles.rowView}>
                        <Text style={styles.title}>昵称</Text>
                        <TextInput
                            style={styles.nameInput}
                            maxLength={8}
                            placeholderTextColor={'#979797'}
                            placeholder={'请输入用户昵称'}
                            defaultValue={this.inputData['name']}
                            onChangeText={(text) => this._onChangeText(text, 'name')}
                        />
                    </View>
                    <HorizontalLine style={styles.horLine}/>
                    <View style={styles.signContent}>
                        <Text style={[styles.title,]}>签名</Text>
                        <TextInput
                            style={styles.signInput}
                            maxLength={30}
                            placeholder={'请输入您的个性签名'}
                            multiline={true}
                            defaultValue={this.inputData['sign']}
                            onChangeText={(text) => this._onChangeText(text, 'sign')}
                        />
                    </View>
                    <Button
                        style={styles.saveButton}
                        titleStyle={styles.saveButtonTitle}
                        title={'保存'}
                        onPress={this._onPressSave}
                    />
                </KeyboardAwareScrollView>
            </Container>
        );
    }
}

const styles = StyleSheet.create({
    scroll: {
        flex: 1,
    },
    horLine: {
        marginHorizontal: 15,
        backgroundColor: '#dbdbdb',
    },
    rowView: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        marginHorizontal: 15,
        paddingVertical: 20,
    },
    signContent: {
        margin: 15,
    },
    title: {
        color: "#585858",
        fontSize: FontSize(15),
    },
    headImg: {
        width: 64,
        height: 64,
        borderRadius: 64 / 2,
    },
    nameInput: {
        textAlign: 'right',
        flex: 1,
        color: '#333',
        padding: 0,
    },
    signInput: {
        height: 90,
        padding: 5,
        color: '#333',
        borderRadius: 3,
        marginVertical: 15,
        borderColor: "#dbdbdb",
        textAlignVertical: 'top',
        borderWidth: Theme.minPixel,
    },
    saveButton: {
        marginTop: 35,
        marginHorizontal: 28,
        paddingVertical: 8,
        borderRadius: 6,
        backgroundColor: '#ffa64f'
    },
    saveButtonTitle: {
        fontSize: FontSize(18),
        color: "#ffffff",
    }
});

export default EditInfo